// import React,{Component} from 'react';
import React from 'react';
import { Input, Button,List} from 'antd'

//无状态组件  "redux-thunk": "^2.3.0"//维达斯尚可
//当组件里面只有一个render()函数的时候 可以直接简写 性能很高
const TodoListUI = (props)=>{
 return (
	<div style={{marginTop:'10px',marginLeft:'10px'}}>
		<div>
			<Input value={props.inputValut}  
				placeholder="Todo Info" 
				style={{width:'300px',marginRight:'10px'}}
				onChange={props.handleInputChange}
			/>
			<Button onClick={props.handleBtnClick} type="primary">提交</Button>
		</div>
		<List
			style={{marginTop:'10px',width:'300px'}}
			bordered
			dataSource={props.list}
			renderItem={(item,index) => (<List.Item 
				onClick={
					()=>{props.handleItemClick(index)}
				}>{item.title?item.title:item}</List.Item>)}
		/>
	</div>
 )
}


// class TodoListUI extends Component { 
//   render(){//软的
//     return (
//       <div style={{marginTop:'10px',marginLeft:'10px'}}>
// 				<div>
// 					<Input value={this.props.inputValut}  
// 						placeholder="Todo Info" 
// 						style={{width:'300px',marginRight:'10px'}}
// 						onChange={this.props.handleInputChange}
// 					/>
// 					<Button onClick={this.props.handleBtnClick} type="primary">提交</Button>
// 				</div>
// 				<List
// 					style={{marginTop:'10px',width:'300px'}}
// 					bordered
// 					dataSource={this.props.list}
//           renderItem={(item,index) => (<List.Item 
//             onClick={
//               (index)=>{this.props.handleItemClick(index)}
//             }>{item}</List.Item>)}
// 				/>
// 			</div>
//     )
//   }
// }
export default TodoListUI;